<template>
  <div style="height: calc(100vh - 50px)">
    <!--地图Div-->
    <div class="map-display" id="mapDiv"></div>
    <!--地图左上角按钮栏-->
    <div id="myToolBtns" class="mytool-btns">
      <div id="buttonDiv" style="float: left;">
        <div class="navbtn-items" v-if=layerShow @click="togglePanel('lyrPanelVisible','layerFlag')" title="图层" id="layerBtn">
          <img src="../../assets/images/map_icons/layer.png">
          <img v-show="layerFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=decorateShow @click="togglePanel('decoratePanelVisible','decorateFlag')" title="鹰眼" id="decorateBtn">
          <img src="../../assets/images/map_icons/Decorate.png">
          <img v-show="decorateFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>

      </div>
    </div>

    <!--图层管理面板-->
    <div class="layerBox" :class="{'layer-hide':lyrPanelVisible}" :id="lyrBox">
      <div id="panelHeader">
        <div class="options lyropt">
          <span style="font-weight: bold;font-size: 1.2em;">图层管理面板</span>
          <el-checkbox @change="handleOpt" style="color: black; float: right;">图层透明度调节</el-checkbox>
        </div>
      </div>
    </div>

    <!--“整饰”下拉-->
    <div class="tool-item-panel mapDecorateTools" id="mapDecorateTools" :class="{'layer-hide':decoratePanelVisible}" data-toolPanel-title="Decorate">
      <div class="map-tool-item"  id="CoordinateDisplay" title="坐标" @click="coordinateShow=!coordinateShow">
        <img src="../../assets/images/map_icons/Coordinate.png">
        <span>坐标</span>
      </div>
      <div class="map-tool-item"  id="ScaleDisplay" title="比例尺" @click="scaleShow=!scaleShow">
        <img src="../../assets/images/map_icons/Scale.png">
        <span>比例尺</span>
      </div>

    <!--坐标与比例尺-->
    <div class="coordinateAndScaleBar">
      <!--地图比例尺-->
      <div id="scaleBarDiv" class="map-scalebar" v-show="scaleShow">
        <div id="scaleBar"></div>
      </div>
      <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
      <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow"></div>
    </div>

    <!--路线规划查询面板 -->
    <div v-show="routePlanningPanelShow" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
      <input type="radio" name="planType" value="0" checked="checked"/>最少时间
      <input type="radio" name="planType" value="1"/>最短距离
      <input type="radio" name="planType" value="2"/>避开高速
      <input type="radio" name="planType" value="3"/>步行
      <br/>
      <!--起点：<input type="text" id="start" value="116.33297,39.99932"/>-->
      起点：<input type="text" id="start" value="114.70276,25.58209"/>
      <!--<input type="button" value="终点" onClick="this.endTool.clear();this.endTool.open()"/>-->
      <!--<input type="button" value="起点" id="startPoint"/>-->
      <input type="button" value="设置起点" @click="startPoint"/>
      <br/>
      <!--终点：<input type="text" id="end" value="116.36181,39.86875"/>-->
      终点：<input type="text" id="end" value="115.77942,25.60686"/>
      <!--<input type="button" value="终点" onClick="this.endTool.clear();this.endTool.open()"/>-->
      <!--<input type="button" value="起点" id="endPoint"/>-->
      <input type="button" value="设置终点" @click="endPoint"/>
      <br/>
      <!--途径点1：<input type="text" id="MID1" value="116.36181,39.86875" />-->
      途径点1：<input type="text" id="MID1" value="115.11475,25.51022" />
      <!--<input type="button" value="设置途径点1" onClick="this.MID1Tool.clear();this.MID1Tool.open()"/>-->
      <input type="button" value="设置途径点1" @click="mid1Point"/>
      <br/>
      <!--途径点2：<input type="text" id="MID2" value="116.36181,39.86875" />-->
      途径点2：<input type="text" id="MID2" value="115.50092,25.40408" />
      <!--<input type="button" value="设置途径点2" onClick="this.MID2Tool.clear();this.MID2Tool.open()"/>-->
      <input type="button" value="设置途径点2" @click="mid2Point"/>
      <br/>
      <!--<input type="button" @click="searchDrivingRoute()" value="驾车路线搜索"/>-->
      <input type="button" id="routeSearch" value="执行路线搜索"/>
    </div>

  </div>

    <!--坐标与比例尺-->
    <div class="coordinateAndScaleBar">
      <!--地图比例尺-->
      <div id="scaleBarDiv" class="map-scalebar" v-show="scaleShow">
        <div id="scaleBar"></div>
      </div>
      <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
      <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow"></div>
    </div>

    <!--路线规划查询面板 -->
    <div v-show="routePlanningPanelShow" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
      <input type="radio" name="planType" value="0" checked="checked"/>最少时间
      <input type="radio" name="planType" value="1"/>最短距离
      <input type="radio" name="planType" value="2"/>避开高速
      <input type="radio" name="planType" value="3"/>步行
      <br/>
      <!--起点：<input type="text" id="start" value="116.33297,39.99932"/>-->
      起点：<input type="text" id="start" value="114.70276,25.58209"/>
      <!--<input type="button" value="终点" onClick="this.endTool.clear();this.endTool.open()"/>-->
      <!--<input type="button" value="起点" id="startPoint"/>-->
      <input type="button" value="设置起点" @click="startPoint"/>
      <br/>
      <!--终点：<input type="text" id="end" value="116.36181,39.86875"/>-->
      终点：<input type="text" id="end" value="115.77942,25.60686"/>
      <!--<input type="button" value="终点" onClick="this.endTool.clear();this.endTool.open()"/>-->
      <!--<input type="button" value="起点" id="endPoint"/>-->
      <input type="button" value="设置终点" @click="endPoint"/>
      <br/>
      <!--途径点1：<input type="text" id="MID1" value="116.36181,39.86875" />-->
      途径点1：<input type="text" id="MID1" value="115.11475,25.51022" />
      <!--<input type="button" value="设置途径点1" onClick="this.MID1Tool.clear();this.MID1Tool.open()"/>-->
      <input type="button" value="设置途径点1" @click="mid1Point"/>
      <br/>
      <!--途径点2：<input type="text" id="MID2" value="116.36181,39.86875" />-->
      途径点2：<input type="text" id="MID2" value="115.50092,25.40408" />
      <!--<input type="button" value="设置途径点2" onClick="this.MID2Tool.clear();this.MID2Tool.open()"/>-->
      <input type="button" value="设置途径点2" @click="mid2Point"/>
      <br/>
      <!--<input type="button" @click="searchDrivingRoute()" value="驾车路线搜索"/>-->
      <input type="button" id="routeSearch" value="执行路线搜索"/>
    </div>

  </div>
</template>

<script>
  //import {bus} from '../../bus.js'   //引入bus.js定义的空的Vue实例

  import '../../assets/plugins/jquery-1.7.2.min'
  import '../../assets/plugins/tdtapi'

  import 'ol/ol.css';
  import 'ol-ext/dist/ol-ext.css';
  import {Map,View} from 'ol';
  import { Tile, Group, Image, Vector as lVector, VectorTile as lVectorTile } from 'ol/layer'
  import {XYZ, Vector} from 'ol/source'
  import { fromLonLat,   toLonLat, get as projGet, getPointResolution } from 'ol/proj'
  import Draw from 'ol/interaction/Draw'
  import {defaults, Attribution, Zoom, ZoomSlider, OverviewMap, ScaleLine, MousePosition} from 'ol/control';
  import { createStringXY } from 'ol/coordinate'
  //import { Logo, TileSuperMapRest, Tianditu, MeasureService } from '@supermap/iclient-ol';
  import LayerSwitcher from 'ol-ext/control/LayerSwitcher'

  export default {
    name:'MyMap',
    components: {
    },
    props: {
      mapCtrlTools:{
        type:Array,
        default:function () {
          return []
        }
      },
      lyrdata: {
        type: Array,
        default: []
      },
      mapParams: {
        type: Object,
        default: {}
      },
    },
    data () {
        return {
          /**地图各悬浮面板的可视状态**/
          lyrPanelVisible:true,  //默认true为隐藏
              legendDivVisible:true,  //默认true为隐藏
          measurePanelVisible:true, //默认true为隐藏
          decoratePanelVisible:true, //默认true为隐藏

          hawkeyePanelVisible:true, //默认true为隐藏
          orderLayerDialogVisible:true,  //默认true为隐藏
          newLayerDialogVisible:true,  //默认true为隐藏
          juanlianPanelVisible:true,  //默认true为隐藏
          ftTreeSelectVisible:true,  //默认true为隐藏
          coordinateShow: true, //2D坐标,默认false不显示
          scaleShow: true, //显示比例尺,默认false不显示
          /**地图左上角-功能启动图标按钮-初始化控制**/
          layerShow:false,//图层控制-功能启动图标按钮，默认false不显示
          legendShow:false,//图例-功能启动图标按钮，默认false不显示
          measureShow:false,//测量工具-功能启动图标按钮，默认false不显示
          hawkEyeShow:false,//鹰眼-功能启动图标按钮，默认false不显示
          decorateShow:false,//鹰眼-功能启动图标按钮，默认false不显示
          juanlianShow:false,//卷帘-功能启动图标按钮，默认false不显示
          regionShow:false,//区域选择树-功能启动图标按钮，默认false不显示
          attrTableShow:false,//属性表格-功能启动图标按钮，默认false不显示
          mapQueryShow:false,//地图查询-功能启动图标按钮，默认false不显示
          modelBuildingShow:false,//模型构建与空间分析-功能启动图标按钮，默认false不显示
          statisticalAnalysisShow:false,//统计分析-功能启动图标按钮，默认false不显示

          layerFlag: false, //图层选中显示红色小标志，默认false为隐藏
          legendFlag: false, //图例选中显示红色小标志，默认false为隐藏
          measureFlag:false, //测量选中显示红色小标志，默认false为隐藏
          hawkeyeFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
          decorateFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
          juanlianFlag:false, //卷帘选中显示红色小标志，默认false为隐藏
          regionFlag:false, //区域选中显示红色小标志，默认false为隐藏
          dtcxFlag:false, //地图查询选中显示红色小标志，默认false为隐藏
          attrTableFlag:true, //属性表格选中显示红色小标志，默认为true显示
          modelFlag:false, //属性表格选中显示红色小标志，默认false为隐藏

          measureUrl:"https://iserver.supermap.io/iserver/services/map-world/rest/maps/World?prjCoordSys=%7B%22epsgCode%22:3857%7D",
          measureVectorLayer:null,
          measureInteraction:null,
          measureSource:null,
          measureFeature:null,

          routePlanningPanelShow:true,  //几何空间查询按钮，默认false隐藏

          map:null,
          drivingRoute:null,
          zoom:9,
          startTool:null,
          endTool:null,
          startIcon:"http://lbs.tianditu.gov.cn/images/bus/start.png",	//起点图标
          endIcon:"http://lbs.tianditu.gov.cn/images/bus/end.png",		//终点图标
          mid:"http://lbs.tianditu.gov.cn/images/driving/routeWayPoint.png",
          startLngLat:null,
          endLngLat:null,
          mid1:null,
          mid2:null,
          infoWin:null,

        }
    },
    methods:{
      togglePanel(attr,attr2){
        this[attr] = !this[attr];
        this[attr2] = !this[attr2];
      },

      onLoad(){
        let that = this;
        this.map = new T.Map('mapDiv');
        //设置显示地图的中心点和级别
        //that.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), that.zoom);
        that.map.centerAndZoom(new T.LngLat(115.3456789, 25.7654321), that.zoom);//定位到赣南地区

        that.startTool = new T.MarkTool(that.map, {
          icon: new T.Icon({
            iconUrl: that.startIcon,
            iconSize: new T.Point(44, 34),
            iconAnchor: new T.Point(12, 31)
          }), follow: true
        });
        that.startTool.on("mouseup", mouseUpStartMaker);

        document.getElementById("routeSearch").addEventListener("click", function(){
            console.log("执行驾车路线搜索");
          searchDrivingRoute();//调用查询方法
        });

        that.endTool = new T.MarkTool(that.map, {
          icon: new T.Icon({
            iconUrl: that.endIcon,
            iconSize: new T.Point(44, 34),
            iconAnchor: new T.Point(12, 31)
          }), follow: true
        });
        that.endTool.on("mouseup", mouseUpEndMaker);
        //this.endTool = endTool;

        let MID1Tool = new T.MarkTool(that.map, {
          icon: new T.Icon({
            iconUrl: that.mid,
            iconSize: new T.Point(44, 34),
            iconAnchor: new T.Point(12, 31)
          }), follow: true
        });
        this.MID1Tool=MID1Tool;
        MID1Tool.on("mouseup", mouseUpMID1Maker);


        let MID2Tool = new T.MarkTool(that.map, {
          icon: new T.Icon({
            iconUrl: that.mid,
            iconSize: new T.Point(44, 34),
            iconAnchor: new T.Point(12, 31)
          }), follow: true
        });
        this.MID2Tool=MID2Tool;
        MID2Tool.on("mouseup", mouseUpMID2Maker);


        let config = {
          policy: 0,	//驾车策略
          onSearchComplete: searchResult	//检索完成后的回调函数
        };

        that.drivingRoute = new T.DrivingRoute(that.map, config);
        //this.drivingRoute=drivingRoute;

        searchDrivingRoute();//调用查询方法

        function searchDrivingRoute() {
          that.map.clearOverLays();
          //起点经纬度
          var startVal = document.getElementById("start").value.split(",");
          that.startLngLat = new T.LngLat(startVal[0], startVal[1]);
          //终点经纬度
          var endVal = document.getElementById("end").value.split(",");
          that.endLngLat = new T.LngLat(endVal[0], endVal[1]);
          //途径点1经纬度
          var miD1 = document.getElementById("MID1").value.split(",");
          that.mid1 = new T.LngLat(miD1[0], miD1[1]);
          //途径点2经纬度
          var miD2 = document.getElementById("MID2").value.split(",");
          that.mid2 = new T.LngLat(miD2[0], miD2[1]);
          // mid1 = new T.LngLat(116.306080, 39.960810);
          // mid2 = new T.LngLat(116.455420, 39.874440);
          //驾车路线搜索
          that.drivingRoute.search(that.startLngLat, that.endLngLat, [that.mid1, that.mid2])
        }

        function createRoute(lnglats, lineColor) {
          //创建线对象
          var line = new T.Polyline(lnglats, {color: "#2C64A7", weight: 5, opacity: 0.9});
          //向地图上添加线
          that.map.addOverLay(line);
        }

        //添加起始点
        function createStartMarker(result) {
          var startMarker = new T.Marker(result.getStart(), {
            icon: new T.Icon({
              iconUrl: that.startIcon,
              iconSize: new T.Point(44, 34),
              iconAnchor: new T.Point(12, 31)
            })
          });
          that.map.addOverLay(startMarker);

          var endMarker = new T.Marker(result.getEnd(), {
            icon: new T.Icon({
              iconUrl: that.endIcon,
              iconSize: new T.Point(44, 34),
              iconAnchor: new T.Point(12, 31)
            })
          });
          that.map.addOverLay(endMarker);

          var midMarker1 = new T.Marker(that.mid1, {
            icon: new T.Icon({
              iconUrl: that.mid,
              iconSize: new T.Point(22, 23),
              iconAnchor: new T.Point(12, 23)
            })
          });
          that.map.addOverLay(midMarker1);

          var midMarker2 = new T.Marker(that.mid2, {
            icon: new T.Icon({
              iconUrl: that.mid,
              iconSize: new T.Point(22, 23),
              iconAnchor: new T.Point(12, 23)
            })
          });
          that.map.addOverLay(midMarker2);
        }

        function searchResult(result) {
          //添加起始点
          createStartMarker(result);

          let obj = result;
          var resultList = document.createElement("div");
          //获取方案个数
          var routes = result.getNumPlans();
          for (var i = 0; i < routes; i++) {

            //获得单条驾车方案结果对象
            var plan = result.getPlan(i);

            //显示单个方案面板
            var div = document.createElement("div");
            div.style.cssText = "font-size:12px; cursor:pointer; border:1px solid #999999";

            //显示方案内容
            var describeStr = "<strong>总时间：" + plan.getDuration() + "秒，总距离：" + Math.round(plan.getDistance()) + "公里</strong>";
            //describeStr += "<div><img src='" + that.startIcon + "'/>" + "116.267620,39.800100" + "</div>";
            describeStr += "<div><img src='" + that.startIcon + "'/>" + "115.3456789, 25.7654321" + "</div>";

            //显示该方案每段的描述信息
            var numRoutes = plan.getNumRoutes();
            for (var m = 0; m < numRoutes; m++) {
              var route = plan.getRoute(m);
              describeStr += (m + 1) + ".<span>" + route.getDescription() + "</span><br/>"

              //显示该方案每段的详细描述信息
              var numStepsStr = "";
              var numSteps = route.getNumSteps();
              for (var n = 0; n < numSteps; n++) {
                var step = route.getStep(n);
                numStepsStr += "<p>" + (n + 1) + ")<a href='javascript://' onclick='showPosition(\"" + step.getPosition().getLng() + "\",\"" + step.getPosition().getLat() + "\",\"" + step.getDescription() + "\");'>" + step.getDescription() + "</a></p>";
              }
              describeStr += numStepsStr;
            }
            //describeStr += "<div><img src='" + that.endIcon + "'/>" + "116.608890,40.026560" + "</div>";
            describeStr += "<div><img src='" + that.endIcon + "'/>" + "115.3789, 25.7321" + "</div>";
            div.innerHTML = describeStr;
            resultList.appendChild(div);

            //显示驾车线路
            createRoute(plan.getPath());
            //显示最佳级别
            that.map.setViewport(plan.getPath());
          }
          //显示公交搜索结果
          //document.getElementById("driving_way").appendChild(resultList);
        }

        //定位关键点
        function showPosition(lng, lat, des) {
          if (that.infoWin) {
            that.map.removeOverLay(that.infoWin);
            that.infoWin = null;
          }
          var lnglat = new T.LngLat(lng, lat);
          that.infoWin = new T.InfoWindow(des, new T.Point([0, 0]));
          that.infoWin.setLngLat(lnglat);
          that.map.addOverLay(that.infoWin);
        }
        function mouseUpStartMaker(e) {
          that.startLngLat = e.currentLnglat;
          document.getElementById("start").value = e.currentLnglat.getLng() + "," + e.currentLnglat.getLat();
        }

        function mouseUpEndMaker(e) {
          that.startLngLat = e.currentLnglat;
          document.getElementById("end").value = e.currentLnglat.getLng() + "," + e.currentLnglat.getLat();
        }
        function mouseUpMID1Maker(e) {
          that.startLngLat = e.currentLnglat;
          document.getElementById("MID1").value = e.currentLnglat.getLng() + "," + e.currentLnglat.getLat();
        }
        function mouseUpMID2Maker(e) {
          that.startLngLat = e.currentLnglat;
          document.getElementById("MID2").value = e.currentLnglat.getLng() + "," + e.currentLnglat.getLat();
        }
      },

      startPoint(){
        this.startTool.clear();
        this.startTool.open();
      },
      endPoint(){
        this.endTool.clear();
        this.endTool.open();
      },
      mid1Point(){
        this.MID1Tool.clear();
        this.MID1Tool.open();
      },
      mid2Point(){
        this.MID2Tool.clear();
        this.MID2Tool.open();
      },

      initMyMap1(){

        //region定义Map和View
        var map = new Map({
          target: 'mapDiv',
          controls: defaults({attribution: false, zoom: false, rotate: false}), //默认取消ol自带的控件显示
          view: new View({
            projection: this.mapParams.projection, //例如：'EPSG:4326', //发布的影像原始坐标系为4326，必须加上此投影才能显示发布的影像
            center: fromLonLat(this.mapParams.center), //例如：[127.87535, 43.58279] 或 [126.47535, 43.58279],//地图初始中心点
            minZoom: this.mapParams.minZoom, //例如：5，//可以缩小的最小级别;若为undefined表示无限制
            maxZoom: this.mapParams.maxZoom, //例如：19，//可以放大的最大级别；若为undefined表示无限制
            zoom: this.mapParams.zoom, //例如：6，//地图初始化时显示级别；注意：若此处未定义，地图初始化显示不出来
            //mExtent:this.mapParams.mExtent, //左下点-右上点
          })
        });
        this.map = map;//把地图传出去，以便外面调用
        //endregion

        //region自定义加载图层
        let lyrdata = this.lyrdata;
          //console.log(lyrdata,333333333);
        //this.baseMap = []
        for (let i = 0, len = lyrdata.length; i < len; i++) {
            //console.log(lyrdata[i],555)
          let tmpLyrs = this.addLayerAtInit(lyrdata[i]);
          tmpLyrs.forEach(value => {
            //this.baseMap.push(value);
            this.map.addLayer(value);
          }) //end fo forEach
        } //end of for
        //endregion

        //region手动测试加载图层
        // 加载天地图图层
        function addTdtLayer (type) {
          let layer = new Tile({
            source: new XYZ({
              url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=' + type + '&tk=cc8b1a46f82b9042ceb3773a900a2a0a&x={x}&y={y}&l={z}',
              projection: 'EPSG:3857'
            })
          })
          layer.id = type
          return layer
        }
        //endregion

        //region缩放控件
          //zoom控件
          let myZoomControl = new Zoom();
          map.addControl(myZoomControl);

          //zoomBar控件
          let myZoomSlider = new ZoomSlider({})
          map.addControl(myZoomSlider);
        //endregion

        //region比例尺和坐标
          //let myScaleControl = new control.ScaleLine();
          //map.addControl(myScaleControl);
          let scaleLineControl = new ScaleLine({
            units: 'metric',
            target: 'scaleBar',
            className: 'ol-scale-line'
          })
          this.map.addControl(scaleLineControl);
          //添加坐标
          let mousePositionControl = new MousePosition({
            coordinateFormat: createStringXY(5), //坐标小数位数
            className: 'custom-mouse-position',
            target: document.getElementById('mouse-position'),
            undefinedHTML: '&nbsp;',
            projection: 'EPSG:4326'
          })
          this.map.addControl(mousePositionControl);
        //endregion

        //region图层切换控件
          //let myLayerSwitcher = new control.LayerSwitcher({});
          //map.addControl(myLayerSwitcher);
        //endregion

        //region鹰眼快视控件
          let myOverviewMap = new OverviewMap({
              view: new View({
                projection: 'EPSG:3857',
                multiWorld: true
              }),
              collapsed: true, //true为默认折叠
              layers: [ addTdtLayer('img_w') ]
            })
          map.addControl(myOverviewMap);
        //endregion

        //region图层管理控件
        if (!document.body.classList.contains('hideOpacity')) {
          document.body.classList.add('hideOpacity')
          document.body.classList.add('hidePercent')
        }

        let lyrs = [];
        let switcher = new LayerSwitcher({
          target: document.querySelector('#' + this.lyrBox),
          show_progress: true, //在切片图层上显示进度条，默认为false
          reordering: true, //允许图层重新排序，默认值为true
          trash: false, //添加垃圾桶按钮以删除图层，默认为false
          extent: true, //添加范围按钮以缩放到图层范围
          //layerGroup: lyrsForLayerSwitcher //筛选出要显示的图层？？
        })
        //通过这种方式覆盖了LayerSwitcher.js源代码中的ol_control_LayerSwitcher.prototype.tip
        //从而重新定义了title提示信息
        switcher.tip = {
          up: '上下移动改变图层叠加顺序[up/down]',
          down: '往下[down]',
          info: '图层相关信息说明[informations...]',
          extent: '跳转到该图层最大范围[zoom to extent]',
          trash: '移除该图层[remove layer]',
          plus: '展开/收缩图层组[expand/shrink]'
        }
        map.addControl(switcher)
        //endregion 图层管理控件

      },
      addLayerAtInit({lyrType,srcType,mUrl,mTitle,mName,mVisible,mSubLayers}){
        let that = this;
        let lyrArr = []
        let lyr = null
        if (lyrType === 'Tile' && srcType === 'XYZ'){
            if (mTitle === "路网" || mTitle === "卫星" || mTitle === "文字标注") {
              lyr = new Tile({
                title: mTitle,
                name: mName,
                visible: mVisible,
                source: new XYZ({
                  url: mUrl,
                })
              })
            }
          lyrArr.push(lyr)
        } else if (lyrType === 'Group') {
          let lG = []
          for (let i = 0; i < mSubLayers.length; i++) {
            let lyr4tmps = null
            lyr4tmps = that.addLayerAtInit(mSubLayers[i])
            lyr4tmps.forEach(value => {
              lG.push(value)
            })
          }
          lyr = new Group({
            title: mTitle,
            visible: mVisible,
            layers: lG
          })
          lyrArr.push(lyr)
        } else {
          console.log(lyrType,srcType,mUrl,mTitle,'抱歉，地图资源类型不明，请检查并重试，或联系管理员协助解决。')
        }
        return lyrArr
      },

      //透明度调节
      handleOpt() {
        document.body.classList.toggle('hideOpacity')
        document.body.classList.toggle('hidePercent')
      },

      //地图中的面板可拖动
      dragFunc(id) {
        var Drag = document.getElementById(id);
        Drag.onmousedown = function(event) {
          var ev = event || window.event;
          event.stopPropagation();
          var disX = ev.clientX - Drag.offsetLeft;
          var disY = ev.clientY - Drag.offsetTop;
          document.onmousemove =
            function(event) {
              var ev = event ||
                window.event;
              Drag.style.left = ev.clientX - disX + "px";
              Drag.style.top = ev.clientY -
                disY + "px";
              Drag.style.cursor = "move";
            };
        };
        Drag.onmouseup = function () {
          document.onmousemove = null;
          this.style.cursor = "default";
        };
      }
    },
    created(){
      //region 地图左上角-功能启动图标按钮-初始化控制
      if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
        this.mapCtrlTools.forEach(item=>{
          if(item === 1){
            this.layerShow = true; //图层控制-功能启动图标按钮
          }else if(item === 3){
            this.decorateShow = true; //统计分析（抽屉）-功能启动图标按钮
          }
        });
      }
      //endregion
    },
    mounted(){
      /*地图初始化*/
      this.initMyMap1();
      this.onLoad();
      /*让地图中的某些面板可拖动*/
      //this.dragFunc("lyrBox");
      //this.dragFunc(this.lyrBox);
    },
    watch:{},
    computed:{
      lyrBox: function () {
        return 'lyrBoxDiv' + new Date().valueOf()
      }
    }
  }
</script>

<style scoped>

  @import '../../assets/styles/my-ol-ext.css';

  .map-display {
    position: absolute;
    width: 100%;
    height:100%;
    background-color: darkgray;
  }

  /*地图工具栏相关样式  */
  .mytool-btns{
    position: relative;
    /*left: 10px;*/
    margin-left:2.5em;
    top: 10px;
    height: 60px;
  }

  .navbtn-items{
    float: left;
    margin: 0 5px;
    /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
  }

  .navBtnDiv{
    /*width: auto;*/
    /*background-color:rgba(0,0,0,0);*/
    margin-left: 55px;
    /*margin-top: 5px;*/
  }
  .navbtn-btn{
    margin-right: 10px;
  }

  .navbtn-items:hover{
    /*background-color: #d0af25;*/
    /*background-color: rgb(255, 253, 73);*/
    cursor: pointer;
  }

  .navbtn-items>img{
    width:36px;
    height:36px;
    padding:5px;
  }
  .item-selected {
    position: absolute;
    /*width: 20px;*/
    /*height: 20px;*/
    /*left: 15px;*/
    width: 25px !important;
    height: 25px !important;
    left: 15px !important;
    bottom: 0;
  }

  .layer-hide {
    display:none;
  }

  /*右侧工具条对应面板*/
  /*工具项：图层管理&ndash;&gt;>对应面板*/
  .layerBox {
    width: 275px;
    padding: 5px;
    background-color: #ffffff;
    border: solid 1px #cecdd2;
    color: black;
    border-radius: 5px;
    /*display: none;*/ /*交由vue变量去控制*/
    position: absolute;
    z-index: 3;
    /* margin: 2px 0 0 5px; */
    /* right: 50px; */
    /*top:50px;*/
    margin-left: 2.5em;
    box-shadow: 4px 4px 10px #888888;
  }

  #panelHeader {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    /* overflow-x: auto; */
  }

  .lyr-panel-title {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.1em;
    display: block;
    font-weight: bold;
    color: white;
    margin: 0.3em;
  }

  .lyropt {
    font-size: 14px;
    margin-left: 10px;
  }



  /*工具栏-（量测-整饰-控制-查询等）下拉框*/
/*  .tool-item-panel{
    !*position: absolute;*!
    position: fixed;
    z-index: 2;
    !*display: none;*!
  }*/
  /*工具栏-（量测-整饰-控制-查询）下拉框-子项*/
  .map-tool-item{
    width: 85px;
    height: 29px;
    border-bottom: 1px solid #b4b4b4;
    cursor: pointer;
  }

  .map-tool-item>img{
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    margin-left: 5px;
  }

  .map-tool-item>span{
    display: block;
    float: left;
    width: 50px;
    height: 20px;
    margin-top: 4px;
    margin-left: 2px;
    line-height: 19px;
    text-align: center;
    font-size:12px;
    font-family:微软雅黑;
  }

  .map-tool-item-click{
    /*color: rgb(18,150,219);*/
    color: rgb(255,0,0);
  }
  /*工具项：量测-->>对应下拉面板*/
  .mapMeasurementTools{
    position:relative;

    width: 85px;
    /*min-height: 220px;*/

    /*top:44px;*/
    /*right计算方式：【69*3-（85-69）】*/
    /*right: 191px;*/
    left: 6em;

    background-color: #ffffff;
    box-shadow: 4px 4px 10px #888888;
    z-index: 5; /*高于lyrBox的3*/
  }

  /*工具项：整饰-->>对应下拉面板*/
  .mapDecorateTools{
    position:relative;
    width: 85px;
    left: 10em;
    background-color: #ffffff;
    box-shadow: 4px 4px 10px #888888;
    z-index: 4; /*高于lyrBox的3*/
  }

  /*地图整饰（坐标、比例尺、图例均通用）*/
  .map-decorate {
    position: absolute;
    /*position: fixed;*/
    /*position: relative;*/
    z-index: 2;
    /*display: block;*/
    /*display: none;*/
  }
  /*比例尺位置*/
  /*用于覆盖原生比例尺的样式*/
  .ol-scale-line {
    background: #f39c12;
    border-radius: 4px;
    bottom: 8px;
    left: -20em; /*约等于16px*20=320px*/
    padding: 2px;
    position: absolute;
    height: 26px;
  }
  .map-scalebar{
    position:absolute;
    bottom:6px;
    left:10em;
    /*top:46px;*/
    /*left:200px;*/
    /*left:485px; !*四个按钮*!*/
    /*left:525px; !*五个按钮*!*/
    /*z-index:999;*/
  }
  /*坐标位置*/
  .map-coordinate{
    /*position:absolute;*/
    /*left:200px;*/
    left:315px;
    /*right:105px;*/
    bottom:15px;
    /*top:10px;*/
    margin:2px 6px;
    padding: 2px 4px;
    font-family:Arial;
    color:#ffffff;
    background-color: #f39c12;
    /*min-width: 150px;*/
    border-radius: 4px;
    height: 20px;
  }



</style>
